<template>
  <div style="margin: 10px 10px;">
    <el-card style="height: 640px; display: inline-block; width: 100%;">
      <!-- 菜单栏 -->
      <div class="top-tool-bar">
          <div style="float: left;">
            <el-button-group>
              <el-button :type="table.status === 0 ? 'success' : 'primary'" @click="changeData(0)">全部</el-button>
              <el-button :type="table.status === 1 ? 'success' : 'primary'" @click="changeData(1)">已处置</el-button>
              <el-button :type="table.status === 2 ? 'success' : 'primary'" @click="changeData(2)">待处置</el-button>
            </el-button-group>
          </div>
          <div style="float: right;">
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="createHandle()">提交处置申请</el-button>
          </div>
      </div>
      <!-- 表格 -->
      <div class="data-table">
        <el-table
          height="500"
          stripe
          highlight-current-row
          v-loading="table.loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          :data="handleList">
          <el-table-column label="id" prop="id" width="60"></el-table-column>
          <el-table-column label="资产编号" prop="assetId" min-width="100"></el-table-column>
          <el-table-column label="管理员" prop="userId" min-width="100" :formatter="row => userMap.get(row.userId)"></el-table-column>
          <el-table-column label="所属部门" prop="depaId" min-width="100" :formatter="_ => department.name"></el-table-column>
          <el-table-column label="处置类型" prop="type" min-width="80" :formatter="row => typeMap.get(row.type)"></el-table-column>
          <el-table-column label="审批状态" prop="status" min-width="80" :formatter="row => handleMap.get(row.status)"></el-table-column>
          <el-table-column label="申请时间" prop="applyTime" min-width="100"></el-table-column>
          <el-table-column label="审批时间" prop="handleTime" min-width="100"></el-table-column>
          <el-table-column label="操作" width="160" fixed="right">
            <template slot-scope="scope">
              <div v-if="scope.row.status === 0" style="display: inline-block; margin-right: 10px;">
                <el-tooltip content="批准" placement="top">
                  <el-button size="mini" type="primary" icon="el-icon-check" circle @click="updatePlan(scope.row.id, 1)"></el-button>
                </el-tooltip>
                <el-tooltip content="退回" placement="top">
                  <el-button size="mini" type="warning" icon="el-icon-close" circle @click="updatePlan(scope.row.id, 2)"></el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                  <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="deletePlan(scope.row.id)"></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="bottom-page">
        <el-pagination
          :disabled="false"
          background
          @size-change="val => this.pagination.pageSize = val"
          @current-change="val => this.pagination.currentPage = val"
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增记录对话框 -->
    <handle-form :show-dialog.sync="showDialog" @success="selectHandleInfo()"></handle-form>
  </div>
</template>

<script>
import data from '@/data/handleData'
import handleMap from '@/data/approvalStatus'
import typeMap from '@/data/assetStatus'

import * as common from '@/common'
import * as handle from '@/api/handle'
import * as user from '@/api/user'
import * as department from '@/api/department'

import HandleForm from './HandleForm.vue'

export default {
  name: 'HandleInfo',
  data () {
    return {
      handleList: data,
      department: {},
      userList: [],
      handleMap,
      typeMap,
      table: {
        status: 0,
        loading: false
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20]
      },
      showDialog: false
    }
  },
  watch: {
    pagination: {
      handler: function () {
        this.selectHandleInfo()
      },
      deep: true
    }
  },
  created () {
    this.selectHandleInfo()
    department.selectById(this.$store.state.user.depaId).then(resp => {
      this.department = resp.data
    }).catch(e => {
      let msg = e.response !== null ? e.response.data.message : '部门信息获取失败'
      this.$notify.error(msg)
    })
  },
  computed: {
    userMap: function () {
      return common.toMap(this.userList, 'id', 'name')
    }
  },
  methods: {
    // 异步获取数据
    loadData (params) {
      this.table.loading = true
      handle.selectByPage(params).then(resp => {
        let result = resp.data
        this.pagination.total = result.total
        this.handleList = result.data
        // 获取关联用户信息
        let set = new Set()
        result.data.forEach(e => { set.add(e.userId) })
        if (set.size === 0) {
          this.table.loading = false
          return
        }
        user.selectByIds(set).then(resp => {
          this.userList = resp.data
          this.table.loading = false
        }).catch(() => { this.table.loading = false })
      }).catch(error => {
        this.table.loading = false
        this.$notify.error({ title: '提示', message: '资产处置数据获取失败' })
        console.error(error)
      })
    },
    // 参数处理
    selectHandleInfo () {
      let params = {
        page: this.pagination.currentPage,
        rows: this.pagination.pageSize,
        depaId: this.$store.state.user.depaId
      }
      switch (this.table.status) {
        case 0: break
        case 1: params.status = [1, 2].toString()
          break
        case 2: params.status = [0].toString()
      }
      this.loadData(params)
    },
    // 参数变更
    changeData (status) {
      this.table.status = status
      if (this.pagination.currentPage === 1) {
        this.selectHandleInfo()
      } else {
        this.pagination.currentPage = 1
      }
    },
    // 创建记录，开启对话框
    createHandle () {
      this.showDialog = true
    },
    // 处置记录审批
    updatePlan (id, newStatus) {
      handle.update({
        id: id,
        status: newStatus
      }).then(resp => {
        this.$notify.success({title: '提示', message: '审批成功'})
        this.selectHandleInfo()
      }).catch(error => {
        const msg = error.response !== null ? error.response.data.message : '请求超时'
        this.$notify.error({title: '错误', message: msg})
      })
    },
    deletePlan (id) {
      console.log('todo - 删除处置记录')
    }
  },
  components: {
    HandleForm
  }
}
</script>

<style scoped>
  .top-tool-bar {
    height: 56px;
  }
  .data-table {
    border: 1px gainsboro solid;
  }
  .bottom-page {
    height: 100%;
    margin: 10px auto;
  }
</style>
